<template>
	<!-- 编辑上传项目大事记-->
	<view>
		<TopNavCustom :title="title"></TopNavCustom>
		<text class="time" style="margin-left: 30rpx; margin-top: 10rpx;">{{time}}</text>
		<view class="content">
			<!-- <u-picker :show="show" :columns="columns" @confirm="confirm" :title="pickerTitle" @close="()=>show=false"
				@cancel="()=>show=false" keyName="partName">
			</u-picker> -->
			<u-datetime-picker :show="showDateTime" v-model="dateTime" mode="datetime" closeOnClickOverlay
				@confirm="confirmDateTime" @cancel="()=>showDateTime=false" :title="pickerDateTitle">
			</u-datetime-picker>
			<u--form labelPosition="left" :model="uploadForm" ref="refForm">
				<view class="add-zone">
					<view class="click-zone">
						<image src="/static/home_icons/delete.png" class="pix">
						</image>
						<image src="/static/home_icons/add.png" class="pix"></image>
					</view>
					<view class="add-form">
						<u-cell-group :border="false">
							<!-- <u-cell size="normal" title="目标位置" isLink :value="uploadForm.partName"
								@click="showPicker(0)">
							</u-cell> -->
							<u-cell size="normal" title="开工时间" :value="uploadForm.startTime" isLink
								@click="showPicker(1)">
							</u-cell>
							<u-cell size="normal" title="结工时间" :value="uploadForm.endTime" isLink
								@click="showPicker(2)">
							</u-cell>
							<u-cell size="normal" title="反馈描述" :border="false" :value="uploadForm.input_num +'/200'">
							</u-cell>
							<view class="pixs">
								<textarea class="_textarea" maxlength="200" @input="monitorInput(uploadForm)"
									v-model="uploadForm.feedBack" placeholder="请描述问题，最多输入200个字" />
								<!-- <span class="numLimit">{{uploadForm.input_num}}/200</span> -->
							</view>
							<u-cell size="normal" title="现场情况" :border="false"></u-cell>
							<view class="pixs">
								<u-upload :fileList="fileList" @afterRead="afterRead" name="pix" :maxCount="9"
									width="188rpx" height="188rpx" :previewFullImage="true" multiple
									@delete="deletePic">
								</u-upload>
							</view>
						</u-cell-group>
					</view>
				</view>
				<button type="default" class="btn" @click="push()">提交</button>
			</u--form>
		</view>
	</view>
</template>

<script>
	import _utils from "@/common/_utils.js"
	import _public from "@/common/public.js"
	import _file from "@/common/file.js"
	import _project from "@/common/project.js"
	import _constant from "@/common/constant.js"
	import $C from '@/common/config.js'
	export default {
		onLoad(node) {
			this._node = JSON.parse(decodeURIComponent(node.item))
			this.title = this._node.title
			this.uploadForm = this._node
			if (this.uploadForm.feedBack != null) {
				this.uploadForm.input_num = this.uploadForm.feedBack.length
			} else {
				this.uploadForm.input_num = 0
			}
			//照片回显
			if (this._node.imgs != null) {
				let imgIdArray = this._node.imgs.split(',')
				let temp = []
				for (let i = 0; i < imgIdArray.length; i++) {
					let element = {
						status: 'success',
						message: '',
						urlId: imgIdArray[i]
					}
					element.url = $C.baseUrl + '/file/download?fileId=' + imgIdArray[i]
					temp.push(element)
				}
				this.fileList = temp
			}
		},
		data() {
			return {
				time: uni.$u.timeFormat(false, 'yyyy-mm-dd'),
				title: "",
				_node: {},
				uploadForm: {
					items: []
				},
				fileIds: [],
				flag: 0,
				formList: [],
				fileList: [],
				columns: [],
				pickerTitle: '',
				showEmpty: true,
				show: false,
				partOne: [],
				dateTime: Number(new Date()),
				showDateTime: false,
				temp: 0,
				pickerDateTitle: ''
			};
		},
		created() {
			// this.Init()
		},
		methods: {
			monitorInput(item) {
				this.uploadForm.input_num = item.feedBack.length
			},
			async Init() {
				//获取 estateId 对应绑定的node
				let id = await _constant.getConstentPartId('公建芯造')
				const data = await _public.getSelectNode(id)
				if (data.length != 0) {
					// 	this.nodeList = _utils.backNodeArray(data);
					// let _node = await _project.getChildNode(this._node.partId)
					this.partOne = data
					this.columns = [this.partOne]
				}
			},
			push() {
				//数据校验
				let flag = true
				let _form_data = this.uploadForm
				if (_form_data.partId == '') {
					uni.$showMsg('尚未选择目标位置')
					flag = false
				} else if (_form_data.startTime == '') {
					uni.$showMsg('尚未选择开始时间')
					flag = false
				} else if (_form_data.endTime == '') {
					uni.$showMsg('尚未选择结束时间')
					flag = false
				} else if (_form_data.feedBack == '') {
					uni.$showMsg('尚填写描述信息')
					flag = false
				} else if (this.fileList == '') {
					uni.$showMsg('尚未上传现场图片')
					flag = false
				}

				if (flag) {
					let cloneData = uni.$u.deepClone(this.uploadForm)
					let pixs = []
					for (let j = 0; j < this.fileList.length; j++) {
						cloneData.eventStatus = 2
						pixs.push(this.fileList[j].urlId)
					}
					cloneData.images = pixs.toString()
					//上传
					if (_project.modStateChronicleEvent(cloneData)) {
						uni.$showMsg('上传成功')
						// uni.switchTab({
						// 	url: '/pages/ihome/home/home'
						// })
					}
					//修改

				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				uni.$showMsg("删除成功")
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					console.log(temp)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			confirmDateTime(time) {
				if (this.flag == '1') {
					this.uploadForm.startTime = uni.$u.timeFormat(time.value,
						'yyyy-mm-dd hh:MM:ss')
				} else {
					this.uploadForm.endTime = uni.$u.timeFormat(time.value,
						'yyyy-mm-dd hh:MM:ss')
				}

				this.showDateTime = false
			},
			confirm(item) {
				switch (this.flag) {
					case 0:
						// this.uploadForm.estateName = item.value[0].partName
						// this.uploadForm.estateId = item.value[0].partId
						this.uploadForm.partName = item.value[0].partName
						this.uploadForm.partId = item.value[0].partId
						break;
				}
				this.show = false
			},
			showPicker(item) {
				this.flag = item
				switch (this.flag) {
					// case 0:
					// 	this.pickerTitle = '选择目标区域'
					// 	this.columns = [this.partOne]
					// 	this.show = true
					// 	break;
					case 1:
						this.pickerDateTitle = '选择开工时间'
						this.showDateTime = true
						break;
					case 2:
						this.pickerDateTitle = '选择结工时间'
						this.showDateTime = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.process-bar {
		// display: block;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.steps {
			// display: block;
			margin-top: 45rpx;
		}
	}

	.content {
		padding: 20rpx 30rpx 58rpx 30rpx;
		display: flex;
		flex-direction: column;

		.uploadForm {
			display: block;

			.add-zone {
				width: 100%;
			}
		}


	}

	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {
		// display: flex;
		// flex-direction: column;
		// display: block;

		.pixs {
			padding: 20rpx;

		}
	}

	.click-zone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.pix {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.btn {
		margin-top: 60rpx;
		width: 560rpx;
		background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 44rpx;
		color: #FFFFFF;
	}

	._textarea {
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}

	.numLimit {
		position: relative;
		top: -40rpx;
		right: -530rpx;

	}
</style>
